<template>
    <div class="home-page">
        <div class="main-wrap">
            <h1>今天吃<span>{{ currentOption }}</span></h1>
            <button @click="toggleLottery">{{ isLoading ? '停' : (firstLoad ? '开始' : '换一个') }}</button>
            <div class="toggle-wrap">
                <span class="type-item" :class="{'active': chosenType === 'dish'}" @click="toggleMode('dish')">菜</span>
                <span class="type-item" :class="{'active': chosenType === 'soup'}" @click="toggleMode('soup')">汤</span>
                <h3 @click="editMenu">自定义菜单</h3>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import {
    SET_DISH_LIST,
    SET_SOUP_LIST
} from '../../store/mutation-types';
export default {
    data () {
        return {
            firstLoad: true,
            isLoading: false,
            chosenType: 'dish',
            currentOrder: -1,
            lotteryTimer: null
        }
    },
    components: {},
    computed: {
        ...mapState([
            'dishList',
            'soupList'
        ]),
        currentList() {
            return this.chosenType === 'dish' ? this.dishList : this.soupList;
        },
        currentOption() {
            return this.currentOrder >= 0 ? this.currentList[this.currentOrder] : '神马？';
        }
    },
    methods: {
        ...mapMutations({
            setDishList: SET_DISH_LIST,
            setSoupList: SET_SOUP_LIST
        }),
        toggleMode(mode) {
            this.chosenType = mode;
            this.currentOrder = -1;
        },
        toggleLottery() {
            if (this.isLoading) {
                // 生成结果
                this.isLoading = false;
                clearTimeout(this.lotteryTimer);
                this.lotteryTimer = null;
            }
            else {
                // 启动随机生成器
                this.firstLoad = false;
                this.isLoading = true;
                this.startLottery();
            }
        },
        startLottery() {
            let luckyOrder = Math.floor(Math.random() * this.currentList.length);
            if (this.currentOrder === luckyOrder) {
                // 下一个随机序号恰巧无变化
                if (luckyOrder === 0) {
                    luckyOrder = this.currentList.length - 1;
                }
                else if (luckyOrder === this.currentList.length - 1) {
                    luckyOrder = 0;
                }
                else {
                    luckyOrder--;
                }
            }
            this.currentOrder = luckyOrder;
            clearTimeout(this.lotteryTimer);
            this.lotteryTimer = null;
            this.lotteryTimer = setTimeout(() => {
                this.startLottery();
            }, 50);
        },
        editMenu() {
            wx.navigateTo({
                url: '/pages/menu/main'
            });
        }
    },
    onLoad() {
        const storageDishList = wx.getStorageSync('dishList');
        const storageSoupList = wx.getStorageSync('soupList');
        if (storageDishList) {
            this.setDishList(storageDishList);
        }
        if (storageSoupList) {
            this.setSoupList(storageSoupList);
        }
    },
    onShow() {
        this.currentOrder = -1;
    }
}
</script>

<style lang="scss" scoped>
.home-page {
    background: #E9E9E9 url() 50% 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: flow 16s linear infinite;
    animation: flow 16s linear infinite;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    .main-wrap {
        position: absolute;
        left: 0;
        top: 33%;
        width: 100%;
        height: auto;
        h1 {
            width: 100%;
            text-align: center;
            padding: 0;
            font-weight: 400;
            font-size: 30px;
            line-height: 40px;
            cursor: pointer;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            span {
                font-weight: bold;
            }
        }
        button {
            margin-top: 20px;
            border-radius: 35px;
            width: 160px;
            height: 60px;
            line-height: 60px;
            background: -webkit-gradient(linear, left top, left bottom, from(#FFBA30), to(#FF911E));
            background: -webkit-linear-gradient(top, #FFBA30, #FF911E);
            background: linear-gradient(to bottom, #FFBA30, #FF911E);
            color: #fff;
            text-align: center;
            display: block;
            font-size: 32px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            -webkit-box-shadow: inset 0 1px #FFD17C, 0 2px 3px rgba(0,0,0,0.2);
            box-shadow: inset 0 1px #FFD17C, 0 2px 3px rgba(0,0,0,0.2);
            border: 1px solid #E88E1D;
        }
        .toggle-wrap {
            position: absolute;
            bottom: -150px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            border-radius: 20px;
            background: rgba(255,255,255,0.6);
            padding: 2px;
            -webkit-transition: .3s;
            transition: .3s;
            z-index: 4;
            font-size: 14px;
            span {
                width: 30px;
                text-align: center;
                color: #999;
                padding: 5px 10px;
                display: inline-block;
                cursor: pointer;
                -webkit-transition: .3s;
                transition: .3s;
                line-height: 1;
                &.active {
                    color: #fff;
                    background: #00BDD6;
                    border-radius: 20px;
                    height: 1em;
                    padding: 5px 10px;
                }
            }
            h3 {
                width: 100%;
                height: auto;
                position: absolute;
                left: 0;
                bottom: -25px;
                text-align: center;
                color: #999;
                font-size: 12px;
            }
        }
    }
}
@keyframes flow{
    0% {
        background-position: 50% 0;
    }
    100% {
        background-position: 50% -250px;
    }
}
</style>
